<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>watch监听</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <div>
            <textarea v-model="words" name="" id="" cols="30" rows="10"></textarea>
        </div>
        <div>对象的数据监听</div>
        <div>
            <textarea v-model="obj.words" name="" id="" cols="30" rows="10"></textarea>
        </div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        // Vue 实例 在全局环境，就有了Vue构造函数
        const app = new Vue({
            // 通过el 配置选择器
            el: '#app',
            data: {
                words: "",
                obj: { words: "222" }

            },
            methods: {

            },


            computed: {

            },
            watch: {
                //该方法在数据变化时调用
                //oldValue 老值一般不用
                words(newValue, oldValue) {
                    console.log(newValue + "," + oldValue);
                },

                //注意特殊字符是不能作为方法名的，需要增加单引号
                'obj.words' (newValue, oldValue) {
                    console.log(newValue + "," + oldValue);
                },

            }



        });
    </script>
</body>

</html>